<template>
  <div :class="['section', 'latest_place']">
    <div id="map">地图定位中...</div>
    <p>
      敢紧前往张裕白兰地线下兑换点<br>
      领取婚宴定制囍酒套装限量好礼！
    </p>
    <home></home>
  </div>
</template>

<script>
  import map from '@/assets/js/map';
  import home from './home';
  export default {
    name: 'latest_place',
    components: {
      home
    },
    mounted: function () {
      axios.get('static/data/places_data.json').then((res) => {
        map.latestPlace('map', res.data);
      }).catch((error) => {
        console.log(error);
      });
    }
  }
</script>

<style lang="scss">
  @import "../assets/scss/config";

  #map {
    width: setRem(480px);
    height: setRem(450px);
    line-height: setRem(450px);
    text-align: center;
    margin: auto;
    background-color: #efefef;
    font-size: setRem(20px);
    color: #333333;

    * {
      font-size: setRem(23px) !important;
    }

    .amap-info {
      width: setRem(450px);

      > div {
        width: 100%;

        .amap-adcontent-body {
          .info-title {
            color: #3079e0;
            background-color: #f6f6f6;
            white-space: nowrap;
            text-overflow: ellipsis;
            height: setRem(48px);
            line-height: setRem(48px);
            overflow: hidden;
            padding: 0 setRem(56px) 0 setRem(16px);
            border-bottom: 1px solid #e3e3e3;
          }
          .info-content {
            padding: setRem(8px) setRem(16px);
            color: #666666;
            line-height: setRem(32px);
            img {
              float: left;
              margin: setRem(3px);
            }
            p {
              span {
                display: block;
                overflow: hidden;
                &:first-child {
                  float: left;
                  width: setRem(100px);
                }
                &:last-child {
                  margin-left: setRem(100px);
                }
              }
            }
          }
          .amap-info-combo {
            overflow: hidden;
            table {
              margin: 0 0 setRem(10px);

              .input-label {
                padding: 0 setRem(12px) 0 setRem(14px);
              }
              .input-label:empty {
                padding: 0;
                width: setRem(12px);
              }
              .keyword-input {
                line-height: setRem(36px);
                height: setRem(37px);
                margin-right: setRem(80px);
                border-radius: setRem(4px);
                overflow: hidden;
                .keyword {
                  height: setRem(36px);
                  padding: 0 setRem(4px);
                }
              }
              .nav-button {
                padding: setRem(2px) setRem(2px) setRem(2px) setRem(10px);
                .nav-icon {
                  padding: setRem(4px) setRem(12px);
                  margin-right: setRem(6px);
                  border-radius: setRem(4px);
                  background: none;
                  background-color: #3ab900;
                  border-color: #3ab900;
                  color: #ffffff;
                }
              }
              .search-button {
                font-family: "iconfont" !important;
                font-style: normal;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                background: none;
                background-color: #3ab900;
                border-top-right-radius: setRem(4px);
                border-bottom-right-radius: setRem(4px);
                width: setRem(48px);
                height: setRem(30px);
                line-height: setRem(30px);
                padding: 0;
                padding-top: setRem(3px);
                margin-right: setRem(5px);
                border: setRem(4px) solid #3ab900;
                text-indent: 0;
                overflow: hidden;
                font-size: setRem(28px) !important;
                &::before {
                  content: "\e609";
                  margin: 0 setRem(10px);
                }
              }
            }
            .amap-info-tabs {
              .tab {
                padding: 0;
                height: setRem(42px);
                line-height: setRem(42px);
                .tab-icon {
                  display: none;
                }
              }
            }
          }
        }
        .amap-adcombo-close {
          top: setRem(16px);
          right: setRem(16px);
          background: none;
          width: setRem(18px);
          height: setRem(18px);
          line-height: setRem(18px);
          font-family: "iconfont" !important;
          font-style: normal;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          text-indent: 0;
          color: #acacac;
          &::before {
            content: '\e617';
          }
        }
      }
    }
  }
</style>

<style lang="scss" scoped>
  @import "../assets/scss/config";
  .latest_place {
    padding-top: setRem(212px);

    p {
      text-align: center;
      font-size: setRem(32px);
      color: #E7C598;
      width: setRem(480px);
      margin: setRem(32px) auto auto;
    }
  }
</style>
